<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>通过关系查找节点</title>
</head>
<body><div id="d1">
        <p>段落1</p>
        <p>段落2</p>
        <p>段落3</p>
        <p>段落4</p></div>
    <script>
        let d1 = document.getElementById("d1");
        // firstChild：获取指定元素的第一个子节点
        console.log(document.body.firstChild);
        // lastChild：获取指定元素的最后一个子节点
        console.log(d1.lastChild);
        // nextSibling：获取当前节点的下一个节点
        console.log(d1.firstChild.nextSibling.nextSibling);
        // previousSibling：获取当前节点的上一个节点
        console.log(d1.lastChild.previousSibling.previousSibling);
        // parentNode：获取当前节点的父节点
        console.log(d1.firstChild.parentNode);
        // childNode：获取指定节点下的所有子节点（包括元素和文本节点）
        console.log(d1.childNodes);
        // children：获取指定节点下的所有元素节点（不包含空白的文本节点）
        console.log(d1.children);

    </script>
</body>
</html>